<template>
  <!-- <view class="shop-container" :style="{background:t('color2')}"> -->
  <view class="shop-container">
    <!-- 顶部导航栏 -->
    <scroll-view scroll-x="true" class="scroll-view">
      <view class="nav-bar">
        <view class="nav-item" @tap="goto" data-url="/pagesEchart/find/release">
          <image
            class="nav-item-icon"
            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/bb4b05b5fde6daab57ccc10386d45843.png"
            mode=""
          ></image>
          <text>发布作品</text>
        </view>
        <view
          class="nav-item"
          @tap="goto"
          data-url="/pagesEchart/find/msgcenter"
        >
          <image
            class="nav-item-icon"
            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250410/ea1769ca95adb3baf1bade419ce7ec40.png"
            mode=""
          ></image>
          <text>消息中心</text>
        </view>

        <!--    @tap="goto" webview方案-->
        <view
          class="nav-item"
          data-url="/pagesEchart/find/datacenter"
          @tap="gowebview"
        >
          <image
            class="nav-item-icon"
            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/efb5492efa20496dadddfdf955daca30.png"
            mode=""
          ></image>
          <text>数据中心</text>
        </view>
        <view class="nav-item" @tap="goto" data-url="/pagesEchart/find/works">
          <image
            class="nav-item-icon"
            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/8edf08abaf1f81213119356db153bdfc.png"
            mode=""
          ></image>
          <text>我的作品</text>
        </view>
      </view>
    </scroll-view>
    <!-- 热门推荐标签 -->
    <view class="hot-tag">
      <image
        src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250409/d3d7091fe447785ed1c464199e1ddff7.png"
        class="hot-icon"
      ></image>
      <text>热门推荐</text>
    </view>

    <!-- 作品列表 -->
    <view class="product-list" v-if="products.length > 0">
      <view
        class="product-item"
        v-for="(item, index) in products"
        :key="index"
        @click.stop="toDetail(item)"
      >
        <view class="product-image-wrap">
          <image
            :src="item.pic"
            mode="aspectFill"
            class="product-image"
          ></image>
          <view class="video-tag" v-if="item.hasVideo">
            <image src="/static/img/play.png" class="play-icon"></image>
          </view>
        </view>
        <view class="product-info">
          <view class="product-title">{{ item.title }}</view>
          <view class="product-likes">
            <view class="product-likes-item">
              <image :src="item.member.headimg" class="heart-icon"></image>
              <text>{{ item.member.nickname }}</text>
            </view>

            <view
              class="product-likes-item"
              @click.stop="handleAction(item, 'thumb')"
            >
              <image
                class="item-icon"
                v-if="item.is_thumbs == 0"
                :src="static_url + '/static/comment_icon/like_icon1.png'"
              >
              </image>
              <image
                class="item-icon"
                v-if="item.is_thumbs == 1"
                :src="static_url + '/static/comment_icon/like_icon2.png'"
              >
              </image>
              <text>{{ item.thumbs }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <nodata v-else></nodata>
    <view class="no-more" v-if="showNoMore && products.length > 0">
      <text>没有更多数据了</text>
    </view>
    <!-- 悬浮发布按钮 -->
    <view class="float-btn" @tap="goPublish">
      <image src="/static/img/add.png" class="plus-icon"></image>
    </view>
    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      currentNav: 0,
      navItems: ["发布作品", "数据中心", "我的作品"],
      products: [],
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      page: 1,
      limit: 10,
      loading: false,
      noMore: false,
      showNoMore: false,
    };
  },
  onLoad(opt) {
    this.opt = app.getopts(opt);
    this.getlist();
  },
  onPullDownRefresh() {
    this.products = [];
    this.page = 1;
    this.getlist(false, true);
  },
  onReachBottom() {
    this.getlist(true, false); // 加载下一页
  },
  methods: {
    gowebview() {
      app.goto(
        "/pages/index/webView?url=" +
          encodeURIComponent(
            "https://hd.hedashepi.online/vue-app/datacenter?aid=" +
              app.globalData.aid +
              "&platform=" +
              app.globalData.platform +
              "&session_id=" +
              app.globalData.session_id
          )
      );
    },

    getlist(isLoadMore = false, forceRefresh = false) {
      if ((this.loading || this.noMore) && !forceRefresh) return;
      this.loading = true;
      // 如果是加载更多，页码+1；否则重置为第1页
      const page = isLoadMore ? this.page + 1 : 1;

      app.get(
        "MemberNote/hotList",
        {
          page: page,
          limit: this.limit,
        },
        (res) => {
          this.loaded();
          if (res.status == 200) {
            if (isLoadMore) {
              this.products = [...this.products, ...res.data];
              this.page = page;
            } else {
              this.products = res.data;
              this.page = 1;
            }
            // 判断是否还有更多数据
            this.noMore = res.data.length < this.limit;
            this.showNoMore = this.noMore && isLoadMore; // 只有加载更多且没有数据时才显示
          } else {
            app.error(res.msg);
          }
          this.loading = false;
          uni.stopPullDownRefresh(); // 停止下拉刷新动画
        }
      );
    },
    // 统一处理点赞/收藏操作
    handleAction(item, actionType) {
      const apiMap = {
        thumb: "MemberNote/noteThumb", // 点赞/取消点赞
      };
      app.post(
        apiMap[actionType],
        {
          member_note_id: item.id,
        },
        (res) => {
          if (res.status == 200) {
            // 操作成功，刷新当前列表
            this.getlist();
          } else {
            uni.showToast({
              title: res.msg || "操作失败",
              icon: "none",
            });
          }
        }
      );
    },
    toDetail(item) {
      uni.navigateTo({
        url: "./works-detail?type=2" + "&id=" + item.id,
      });
    },
    switchNav(index) {
      this.currentNav = index;
    },
    goPublish() {
      uni.navigateTo({
        url: "./release",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.scroll-view {
  width: 100%;
  white-space: nowrap;
}

.nav-bar {
  display: inline-flex;
  padding: 20rpx;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // width: 22%;
  margin-right: 20rpx;
  padding: 20rpx 10rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 253, 248, 1);
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.nav-item-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.nav-item text {
  font-size: 28rpx;
  font-weight: 700;
}

.hot-tag {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .hot-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
  }

  text {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
}

.product-list {
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .product-item {
    width: 48%;
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;

    .product-image-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 100%;

      .product-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .video-tag {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .play-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .product-info {
      padding: 16rpx;

      .product-title {
        font-size: 26rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .product-likes {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .heart-icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 6rpx;
          border-radius: 50%;
        }

        .product-likes-item {
          display: flex;
          align-items: center;
        }

        text {
          font-size: 24rpx;
          color: #999;
        }

        .item-icon {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
}

.float-btn {
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  width: 100rpx;
  height: 100rpx;
  background: #b72609;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .plus-icon {
    width: 40rpx;
    height: 40rpx;
  }
}

.no-more {
  width: 100%;
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}
</style>
